<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜品订购首页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="width: 710px;height: 600px;margin-top: 0px;">

    <ul class="layui-nav">
        <li class="layui-nav-item layui-this">
            <a href="">首页</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;" id="myOrder">我的订单<span class="layui-badge" id="orderNumber"></span></a>
        </li>
        <li class="layui-nav-item layui-layout-right" lay-unselect="">
            <a href="javascript:;"><img src="img/user_avatar.jpg" class="layui-nav-img"><span id="nickName">我</span></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" id="logOutBtn">退了</a></dd>
            </dl>
        </li>
    </ul>
    <div>
<hr>
<!--    <div style="margin-left: 460px; width: 200px;">-->
<!--        欢迎你,<a href="javascript:;" id="nickName" style="color: #FFB800"></a><a id="logOutBtn">&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>-->
<!--    </div>-->

    <script type="text/html" id="userBarDemo">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteOrder" id="deleteOrder">删除订单</a>
    </script>
    <!-- 用户订单表 -->
    <div id="orderDiv" style="display: none">
        <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
    </div>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-xs" style="width: 50px" lay-event="order">订购</a>
    </script>

    <div class="layui-carousel" id="test2">
        <div carousel-item="">
            <div><img src="img/玉米胡萝卜筒骨汤.png" height="200px" width="680px"></div>
            <div><img src="img/叉烧.jpg" height="200px" width="680px"></div>
            <div><img src="img/高颜值圣诞双色蛋糕卷.png" height="200px" width="680px"></div>
        </div>
    </div>
<!--    <fieldset class="layui-elem-field layui-field-title">-->
<!--        <legend>外卖订餐列表</legend>-->
<!--    </fieldset>-->

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['table','jquery','element','carousel','form'], function(){
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
            var table = layui.table;
            var $ = layui.jquery;
            var carousel = layui.carousel;
            var form = layui.form;
            //轮播
            carousel.render({
                elem: '#test2'
                ,interval: 1800
                ,anim: 'fade'
                ,height: '200px'
                ,width: '680px'
            });
            var tableIns = table.render({
                elem: '#test'
                ,url:'/menuApi/menuList'
                ,title: '菜单列表'
                ,cols: [
                    [
                        {field:'id',  title: '编号', sort: true}
                        ,{field:'name',title: '菜品'}
                        ,{field:'price',  title: '单价'}
                        ,{field:'flavor', title: '口味'}
                        ,{field:'tid',  title: '分类',templet:function(data){
                            return data.type.name
                            }
                        }
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', align:'center', width:72}

                    ]
                ]
                ,page: true
            });

            var jq = $;
            //监听菜品表行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'order'){
                    layer.confirm('确认订购【'+data.name+'】么', function(index){
                        var menuId={'menuId':data.id};
                        $.post("/orderApi/insertOrder",menuId,function (res) {
                            layer.close();
                            layer.alert(res.data, {icon: 1});
                        })
                    });

                }
            });

            //监听订单表行工具事件
            table.on('tool(orderTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'deleteOrder'){
                    layer.confirm('真的删除订单么', function(index){
                        $.ajax({
                            type: 'DELETE',
                            url: '/orderApi/deleteOrder',
                            data: {'id':data.id},
                            success: function (res){
                                obj.del();
                                layer.close();
                                layer.msg(res.data);
                            }
                        })
                    });

                }
            });

            $(function () {
                //加载用户昵称
                $.get('/accountApi/getLoginObj/user',function (res) {
                    $('#nickName').text(res.data.nickname)
                })
                //加载用户订单数量
                $.get('/orderApi/getOrderNumber',function (res) {
                    $('#orderNumber').text(res.data)
                })

                //注销
                $('#logOutBtn').click(function () {
                    layer.confirm('真的退出么', function(index){
                        layer.close(index);
                        layer.load(2);
                        $.get("/accountApi/logout",function () {
                            location.href="login.html";
                        })
                    });
                })

                //查看用户订单
                $('#myOrder').click(function (){
                    orderDiv=layer.open({
                        type:1,
                        title:'<i class="layui-icon layui-icon-cart"></i>&nbsp;我的订单',
                        area:['720px','350px'],
                        content:$('#orderDiv'),
                        success:function () {

                            //加载用户订单表
                            table.render({
                                elem: '#orderTable'
                                ,url:'/orderApi/userOrderList'
                                ,title: '订单列表'
                                ,limit: 5
                                ,cols: [
                                    [
                                        {field:'id', title: '编号', sort: true}
                                        ,{field:'menu', title: '菜品',templet:function(data){
                                            return data.menu.name
                                            }
                                        }
                                        ,{field:'price', title: '单价', templet:function(data){
                                            return data.menu.price
                                            }
                                        }
                                        ,{field:'flavor', title: '口味',templet:function(data){
                                            return data.menu.flavor
                                            }
                                        }
                                        ,{field:'date', title: '下单时间'}
                                        ,{field:'state', title: '订单状态',templet:function(data){
                                            return data.state==1?'<i class="layui-icon" style="color: green">&#xe605;</i>已派送':'<i class="layui-icon" style="color: chocolate">&#x1006;</i>未派送';
                                        }

                                    }
                                        ,{fixed: 'right', title:'操作', toolbar: '#userBarDemo', align:'center',width:80}

                                    ]
                                ]
                                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                                    //,curr: 5 //设定初始在第 5 页
                                    ,groups: 1 //只显示 1 个连续页码
                                    ,first: false //不显示首页
                                    ,last: false //不显示尾页

                                }
                                ,text: {
                                    none: '你还没下单呢' //默认：显示 无数据。
                                }
                            });

                        }
                    })
                })


            })
        });
    </script>

</div>
</div>
</body>
</html>